<template>
    <div class="agent-list">
        <div class="agent-list-card">
            <div class="agent-list-head">
                <Row :gutter="5" style="margin-bottom: 10px">
                    <Col span="4">
                        <DatePicker  clearable v-model="searchData.timeStartEnd" style="width: 100%" type="daterange" placeholder="时间筛选"></DatePicker>
                    </Col>
                    <Col span="4">
                        <Input clearable v-model="searchData.userPhone" placeholder="用户手机号" type="text"></Input>
                    </Col>
                    <Col span="4">
                        <Input clearable v-model="searchData.money_begin" placeholder="最小金额" type="text"></Input>
                    </Col>
                    <Col span="4">
                        <Input clearable v-model="searchData.money_last" placeholder="最大金额" type="text"></Input>
                    </Col>
                    <Col span="4">
                        <Select clearable v-model="searchData.sort" placeholder="创建时间排序">
                            <Option :value="1">升序</Option>
                            <Option :value="2">降序</Option>
                        </Select>
                    </Col>
                    <Col span="4">
                        <Select clearable v-model="searchData.status" placeholder="状态">
                            <Option :value="0">预定</Option>
                            <Option :value="1">代理中</Option>
                            <Option :value="2">已取消</Option>
                        </Select>
                    </Col>
                </Row>
                <Row :gutter="5">
                    <Col span="4">
                        <Select clearable v-model="searchData.areaId1" placeholder="选择地址(省)" @on-change="getAreaId2">
                            <Option v-for="(value,key) in areaId1List" :value="value.areaid">{{value.areaname}}</Option>
                        </Select>
                    </Col>
                    <Col span="4">
                        <Select clearable v-model="searchData.areaId2" placeholder="选择地址(市)" @on-change="getAreaId3">
                            <Option v-for="(value,key) in areaId2List" :value="value.areaid">{{value.areaname}}</Option>
                        </Select>
                    </Col>
                    <Col span="4">
                        <Select clearable v-model="searchData.areaId3" placeholder="选择地址(县、区)">
                            <Option v-for="(value,key) in areaId3List" :value="value.areaid">{{value.areaname}}</Option>
                        </Select>
                    </Col>
                    <Col span="4">
                        <Input clearable v-model="searchData.areaName" placeholder="地区名" type="text"></Input>
                    </Col>
                    <Col span="8">
                        <Button :loading="search_loading" @click="searchGetList" class="subSearch" type="primary"><Icon type="ios-pulse-strong"></Icon> 筛 选</Button>
                    </Col>
                </Row>
            </div>
            <i-table height="645" stripe :columns="columns" :data="data"></i-table>
            <div style="padding: 15px;">
                <Page @on-page-size-change="changeTiao" @on-change="changePage" :current="index" :total="total" show-elevator show-sizer :placement="'top'" :page-size="page_con" :page-size-opts="[10, 15, 20, 30, 40, 50]"></Page>
            </div>
        </div>
        <!--设为代理-->
        <Modal v-model="modal2" width="360">
            <p slot="header" style="text-align:center">
                <a>
                    <Icon type="information-circled"></Icon>
                    <span>设为代理</span>
                </a>
            </p>
            <div style="text-align:center">
                <p>是否设为代理？</p>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="setAgent">确定</Button>
            </div>
        </Modal>
        <!--取消代理-->
        <Modal v-model="modal3" width="360">
            <p slot="header" style="text-align:center">
                <a>
                    <Icon type="information-circled"></Icon>
                    <span>取消代理</span>
                </a>
            </p>
            <div style="text-align:center">
                <p>是否取消代理？</p>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="cancelAgent">确定</Button>
            </div>
        </Modal>
        <!--取消预定-->
        <Modal v-model="modal4" width="360">
            <p slot="header" style="text-align:center">
                <a>
                    <Icon type="information-circled"></Icon>
                    <span>取消预定</span>
                </a>
            </p>
            <div style="text-align:center">
                <p>是否取消预定？</p>
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading" @click="cancelYuding">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    export default {
        name:"agent-list",
        data(){
            return{
                columns:[
                    {
                        title: '序号',
                        type: 'index',
                        width: 60,
                        align:"center",
                    },
                    {
                        title: '省份',
                        key: 'aname',
                        align:"center",
                    },
                    {
                        title: '城市',
                        align:"center",
                        key: 'bname',
                    },
                    {
                        title: '县、区',
                        key: 'cname',
                        align:"center",
                    },
                    {
                        title: '用户名',
                        key: 'loginname',
                        align:"center",
                    },
                    {
                        title: '推荐人',
                        key: 'tuijian',
                        align:"center",
                    },
                    {
                        title: '金额',
                        key: 'money',
                        align:"center",
                        render:(h,params)=>{
                            return `￥ ${params.row.money}`
                        }
                    },
                    {
                        title: '状态',
                        key: 'status',
                        align:"center",
                        render:(h,params)=>{
                            if(params.row.status=="0"){
                                return "预定"
                            }else if(params.row.status=="1"){
                                return "代理中"
                            }else{
                                return "已取消"
                            }
                        }
                    },
                    {
                        title: '添加时间',
                        key: 'add_time',
                        align:"center",
                        render:(h,params)=>{
                            return `${this.timeFormat(params.row.add_time)}`
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width:360,
                        align: 'center',
                        render: (h, params) => {
                            return h('ButtonGroup', [
                                /*h('Button', {
                                    props: {
                                        type: 'primary',
                                    },
                                    on: {
                                        click: () => {

                                        }
                                    }
                                },"查看详情"),*/
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        disabled:params.row.status==="0"?false:true
                                    },
                                    on: {
                                        click: () => {
                                            this.id = params.row.agent_id
                                            this.modal2 = true
                                        }
                                    }
                                }, '设为代理'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        disabled:params.row.status==="1"?false:true
                                    },
                                    on: {
                                        click: () => {
                                            this.id = params.row.agent_id
                                            this.modal3 = true
                                        }
                                    }
                                }, '取消代理'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        disabled:params.row.status==="0"?false:true
                                    },
                                    on: {
                                        click: () => {
                                            this.id = params.row.agent_id
                                            this.modal4 = true
                                        }
                                    }
                                }, '取消预定'),
                            ]);
                        }
                    },
                ],
                data:[],
                total:0,
                index:1,
                page_con:15,
                searchData:{
                    timeStartEnd:[],//两个时间内的赛选
                    userPhone:"",//用户手机号
                    money_begin:"",//最小金额
                    money_last:"",//最大金额
                    sort:"",//排序
                    status:"",//状态
                    areaId1:"",//省
                    areaId2:"",//市
                    areaId3:"",//县
                    areaName:"",//地区名
                },
                search_loading:false,
                areaId1List:[],//省级
                areaId2List:[],//市级
                areaId3List:[],//县
                id:"",//操作ID
                modal_loading:false,
                modal2:false,
                modal3:false,
                modal4:false,
            }
        },
        activated(){
            this.getAgentList()
            this.getAreaId1()
        },
        methods:{
            getAgentList(){
                this.getJsonData("Agent/getAgent",{
                    num:this.page_con,
                    page:this.index,
                    begin:this.searchData.timeStartEnd[0]?this.searchData.timeStartEnd[0]/1000:"",
                    last:this.searchData.timeStartEnd[1]?this.searchData.timeStartEnd[1]/1000:"",
                    userPhone:this.searchData.userPhone,
                    money_begin:this.searchData.money_begin,
                    money_last:this.searchData.money_last,
                    status:this.searchData.status,
                    sort:this.searchData.sort,
                    area_1:this.searchData.areaId1,
                    area_2:this.searchData.areaId2,
                    area_3:this.searchData.areaId3,
                    areaName:this.searchData.areaName,
                },true)
                    .then((res)=>{
                        this.data=res.data
                        this.total=parseInt(res.count)
                        this.search_loading=false
                    })
                    .catch((res)=>{
                        this.search_loading=false
                    })
            },
            //获取省
            getAreaId1(){
                this.getJsonData("Areas/getAreas",{parentId:""})
                    .then((res)=>{
                        this.areaId1List = res.data
                    })
            },
            //获取市
            getAreaId2(){
                if(this.searchData.areaId1!==""){
                    this.getJsonData("Areas/getAreas",{parentId:this.searchData.areaId1})
                        .then((res)=>{
                            this.areaId2List = res.data
                        })
                }else{
                    this.areaId2List = []
                    this.areaId3List = []
                }
            },
            //获取县
            getAreaId3(){
                if(this.searchData.areaId2!==""){
                    this.getJsonData("Areas/getAreas",{parentId:this.searchData.areaId2})
                        .then((res)=>{
                            this.areaId3List = res.data
                        })
                }else{
                    this.areaId3List = []
                }
            },
            changePage(n){
                this.index=n
                this.getAgentList()
            },
            changeTiao(num){
                this.page_con=num
                this.index=1
                this.getAgentList()
            },
            searchGetList(){
                this.search_loading=true
                this.index=1
                this.getAgentList()
            },
            //设为代理
            setAgent(){
                this.modal_loading = true;
                this.getJsonData("Agent/changeAgent",{agent_id:this.id},true)
                    .then((res)=>{
                        this.getAgentList()
                        this.modal_loading = false;
                        this.modal2 = false;
                        this.$Message.success('设置成功');
                    }).catch((res)=>{
                    this.modal_loading = false;
                    this.modal2 = false;
                })
            },
            //取消代理
            cancelAgent(){
                this.modal_loading = true;
                this.getJsonData("Agent/cancelAgent",{agent_id:this.id},true)
                    .then((res)=>{
                        this.getAgentList()
                        this.modal_loading = false;
                        this.modal3 = false;
                        this.$Message.success('取消成功');
                    }).catch((res)=>{
                    this.modal_loading = false;
                    this.modal3 = false;
                })
            },
            //取消预定
            cancelYuding(){
                this.modal_loading = true;
                this.getJsonData("Agent/cancelYuding",{agent_id:this.id},true)
                    .then((res)=>{
                        this.getAgentList()
                        this.modal_loading = false;
                        this.modal4 = false;
                        this.$Message.success('取消成功');
                    }).catch((res)=>{
                    this.modal_loading = false;
                    this.modal4 = false;
                })
            }
        },
    }
</script>
<style lang="less">
    @import "agent-list";
</style>